<template>
  <view class="user-center">
    <!-- 用户信息头部 -->
    <view class="user-header">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill" />
        <view class="info-right">
          <view class="nickname">{{ userInfo.nickname || '未登录' }}</view>
          <view class="phone" v-if="userInfo.phone">{{ userInfo.phone }}</view>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" @tap="navigateTo('/pages/booking-history/booking-history')">
        <view class="menu-left">
          <text class="icon">📅</text>
          <text>我的预约</text>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @tap="navigateTo('/pages/favorite/favorite')">
        <view class="menu-left">
          <text class="icon">❤️</text>
          <text>收藏场地</text>
        </view>
        <text class="arrow">></text>
      </view>

      <view class="menu-item" @tap="showService">
        <view class="menu-left">
          <text class="icon">💬</text>
          <text>联系客服</text>
        </view>
        <text class="arrow">></text>
      </view>

      <view class="menu-item" @tap="navigateTo('/pages/settings/settings')">
        <view class="menu-left">
          <text class="icon">⚙️</text>
          <text>设置</text>
        </view>
        <text class="arrow">></text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const userInfo = ref({
  avatar: 'https://img.icons8.com/color/96/user-male-circle--v1.png',
  nickname: '张先生',
  phone: '138****8888'
})

const navigateTo = (url) => {
  uni.navigateTo({ url })
}

const showService = () => {
  uni.showActionSheet({
    itemList: ['在线客服', '电话客服'],
    success: (res) => {
      if (res.tapIndex === 0) {
        // 打开在线客服
      } else {
        uni.makePhoneCall({
          phoneNumber: '400-888-8888'
        })
      }
    }
  })
}
</script>

<style scoped>
.user-center {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-header {
  background-color: #ff4d4f;
  padding: 40rpx 30rpx;
  color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.info-right {
  margin-left: 30rpx;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.phone {
  font-size: 28rpx;
  opacity: 0.8;
}

.menu-list {
  margin-top: 20rpx;
  background-color: #fff;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.menu-left {
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 20rpx;
  font-size: 40rpx;
}

.arrow {
  color: #999;
}
</style> 